﻿@import "variables";

@each $name, $value in $theme-colors {
    $color: $value;

    .custom-switch {
        .custom-control-input {
            &:checked {
                &.custom-control-input-#{$name} ~ .custom-control-label::after {
                    background-color: $color;
                }

                &.custom-control-input-#{$name} ~ .custom-control-track {
                    background-color: rgba($color,.25);
                }
            }

            &:disabled {
                &.custom-control-input-#{$name} ~ .custom-control-label::after {
                    background-color: #bdbdbd;
                }

                &.custom-control-input-#{$name} ~ .custom-control-track {
                    background-color: rgba(#bdbdbd,.25);
                }
            }
        }
    }
}

@mixin switch($size) {
    $width: 1rem;
    $height: 1rem;
    $padding-left: 0;

    @if $size == 'xs' {
        $width: 1rem;
        $height: 1rem;
    }
    @else if $size == 'sm' {
        $width: 1.5rem;
        $height: 1.5rem;
    }
    @else if $size == 'md' {
        $width: 2.5rem;
        $height: 2rem;
        $padding-left: $width / 2;
    }
    @else if $size == 'lg' {
        $width: 3rem;
        $height: 2.25rem;
        $padding-left: $width / 2;
    }
    @else if $size == 'xl' {
        $width: 4rem;
        $height: 2.5rem;
        $padding-left: $width / 2;
    }

    $handle-width: $width;
    $handle-height: $height;

    $handle-shadow: 0 3px 1px -2px rgba($black, 0.2), 0 2px 2px 0 rgba($black, 0.14), 0 1px 5px 0 rgba($black, 0.12) !default;

    .custom-control-input.custom-control-input-#{$size} {
        ~ .custom-control-track {
            height: calc(#{$height} - 4px);
            top: 0;
            left: 0;
            width: calc(#{$width} + 0.75rem);
        }

        ~ .custom-control-label {
            padding-left: #{$padding-left};
            line-height: $height;
            vertical-align: middle;

            &::before {
                height: calc(#{$height} * 1.5);
                width: calc(#{$height} * 1.5);
            }

            &::after {
                height: calc(#{$height} - 4px);
                width: calc(#{$height} - 4px);
                left: -calc(#{$width} - 4px);
                border-radius: 50%;
                box-shadow: $handle-shadow;
                border-radius: calc(#{$width} - (#{$height} / 2));
            }
        }

        &:checked ~ .custom-control-label::after,
        &:checked ~ .custom-control-label::before {
            transform: translateX(calc(#{$width} - (#{$height} / 2)));
        }
        /* &:not(:checked):focus ~ .custom-control-label::after {
            box-shadow: $handle-shadow, 0 0 0 $height rgba($black, 0.08);
        }

        &:checked:focus ~ .custom-control-label::after {
            box-shadow: $handle-shadow, 0 0 0 $height rgba($primary, 0.12);
        }*/
    }
}

.custom-switch {
    @include switch('xs');
}

.custom-switch {
    @include switch('sm');
}

.custom-switch {
    @include switch('md');
}

.custom-switch {
    @include switch('lg');
}

.custom-switch {
    @include switch('xl');
}
